<!DOCTYPE html>
<html lang='zh-cn'>

<head>
    <meta charset="UTF-8" />
    <title>test</title>
</head>

<body>
    <div></div>
    <hr>
    <p></p>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

    <script>
        function testcb() {
            console.log('这是一个事件回调函数');
        }
        // 防抖函数
        const a = _.debounce(testcb, 1000)
        // 节流函数
        const b = _.throttle(testcb, 1000)
        console.log(a);
        console.log(b);
        document.querySelector('div').innerText = a
        document.querySelector('p').innerText = b


        // 自己封装的防抖函数  多次点击触发时，只触发最后一次点击 指定时间后才执行
        function debounce(func, wait) {
            // timeout 定时器的id
            let timeout; 
            // 返回一个函数 这个函数中增加了 定时器 定时器的时间就是 形参 wait
            return function () {
                // 用于修改这个返回的函数的this指向
                const context = this;
                // 接收调用整个返回的函数 的所有形参
                const args = arguments;
                // 频繁点击触发这个函数时，下一次点击会清除上一次点击创建的定时器
                clearsetTimeout(timeout)
                // 创建一个定时器
                timeout = setTimeout(() => {
                    // 在定时器中调用真正的回调函数 func 并且使用apply修改this指向，确保函数的this始终指向事件源
                    // 把所有的形参 也传递给 func 函数
                    func.apply(context, args)
                }, wait)
            }
        }
    </script>
</body>

</html>